﻿<!doctype html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>兼容IE8的响应式网格瀑布流布局jQuery插件</title>
	<link rel="stylesheet" href="css/normalize.css">
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" href="css/pinterest grid.css">
</head>

<body>
	<section class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>兼容IE8的响应式网格瀑布流布局jQuery插件 <span>瀑布流布局</span></h1>
		</header>
	</section>
	<section id="gallery-wrapper">
		<article class="white-panel">
			<img src="img/1.jpg" class="thumb">
			<h1><a href="#">标题 1</a></h1>
			<p>图片描述 1</p>
		</article>
		<article class="white-panel">
			<img src="img/2.jpg" class="thumb">
			<h1><a href="#">标题 2</a></h1>
			<p>图片描述 2</p>
		</article>
		<article class="white-panel">
			<img src="img/3.jpg" class="thumb">
			<h1><a href="#">标题 3</a></h1>
			<p>图片描述 3</p>
		</article>
		<article class="white-panel">
			<img src="img/4.jpg" class="thumb">
			<h1><a href="#">标题 4</a></h1>
			<p>图片描述 4</p>
		</article>
		<article class="white-panel">
			<img src="img/5.jpg" class="thumb">
			<h1><a href="#">标题 5</a></h1>
			<p>图片描述 5</p>
		</article>
		<article class="white-panel">
			<img src="img/6.jpg" class="thumb">
			<h1><a href="#">标题 6</a></h1>
			<p>图片描述 6</p>
		</article>
		<article class="white-panel">
			<img src="img/7.jpg" class="thumb">
			<h1><a href="#">标题 7</a></h1>
			<p>图片描述 7</p>
		</article>
		<article class="white-panel">
			<img src="img/8.jpg" class="thumb">
			<h1><a href="#">标题 8</a></h1>
			<p>图片描述 8</p>
		</article>
		<article class="white-panel">
			<img src="img/9.jpg" class="thumb">
			<h1><a href="#">标题 9</a></h1>
			<p>图片描述 9</p>
		</article>
		<article class="white-panel">
			<img src="img/10.jpg" class="thumb">
			<h1><a href="#">标题 10</a></h1>
			<p>图片描述 10</p>
		</article>
		<article class="white-panel">
			<img src="img/11.jpg" class="thumb">
			<h1><a href="#">标题 11</a></h1>
			<p>图片描述 11</p>
		</article>
		<article class="white-panel">
			<img src="img/12.jpg" class="thumb">
			<h1><a href="#">标题 12</a></h1>
			<p>图片描述 12</p>
		</article>
		<article class="white-panel">
			<img src="img/13.jpg" class="thumb">
			<h1><a href="#">标题 13</a></h1>
			<p>图片描述 13</p>
		</article>
		<article class="white-panel">
			<img src="img/14.jpg" class="thumb">
			<h1><a href="#">标题 14</a></h1>
			<p>图片描述 14</p>
		</article>
		<article class="white-panel">
			<img src="img/15.jpg" class="thumb">
			<h1><a href="#">标题 15</a></h1>
			<p>图片描述 15</p>
		</article>
	</section>
	<footer class="related">
		<h3>兼容IE8+瀑布流布局</h3>
	</footer>
	<script src="js/jquery-1.12.4.js"></script>
	<script src="js/pinterest_grid.js"></script>
	<script>
		$(function () {
			$("#gallery-wrapper").pinterest_grid({
				no_columns: 4,
				single_column_breakpoint: 600
			});
		})
	</script>
</body>

</html>